<template>
	<cl-page background-color="#fff" :padding="20">
		<view class="page-goods-search">
			<!-- 搜索栏 -->
			<view class="cl-sticky">
				<view class="search-bar">
					<uv-search @search="onSearch" focus :showAction="false" v-model="searchValue" clearable
						placeholder="搜索症状/身体部位/象数名称" @custom="onSearch"></uv-search>
				</view>
			</view>

			<!-- 历史 -->
			<view class="lastest" v-if="history.length > 0">
				<view class="order">
					<cl-row type="flex" align="center" justify="space-between">
						<text class="label">最近搜索</text>
						<text class="clearHistory" @tap="clearHistory">清除全部</text>
					</cl-row>
				</view>

				<view class="values">
					<cl-row type="flex" wrap>
						<text class="history-list  uv-border" @tap="onSearch(item)" v-for="(item, index) in history"
							:key="index">{{ item }}</text>
					</cl-row>
				</view>
			</view>
			<!-- 结果 -->
			<view class="lastest" v-if="list.length>0" style="margin-top:-30rpx">
				<view class="order">
					<cl-row type="flex" align="center" justify="space-between">
						<text class="label">搜索结果</text>
					</cl-row>
				</view>
				<view class="group uv-border-bottom" v-for="(group, index) in list" :key="group.id" @tap="router.push('/pages/index/recipeInfo?id='+group.id)">
					<view class="list">
						<view class="groupName">{{group.name}}</view>
						<!--  @tap="toInfo(group)" -->
						<uv-read-more color="#2b2e3d" ref="readMore" show-height="200rpx" :toggle="true">
							<rich-text :nodes="group.description" selectable @itemclick="uvParseTap"></rich-text>
						</uv-read-more>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<uv-empty :text="'暂无象数配方'" :textSize="16"
					icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { onPullDownRefresh, onShow, onReady } from "@dcloudio/uni-app";
	import { useCool, useStore, usePager, storage } from "/@/cool";
	import { reactive, ref, computed, onMounted } from "vue";
	import { useUi } from "/$/cool-ui";
	import { audioManagerObj, playMusic, getNetworkType, clearAudioManager, setMusicValueArr, stopAudioManager,formatRichText } from "/@/cool/utils";
	const { pager, Loading, Finished, Loadmore, list, onData, onRefresh } = usePager();
	const { router, service } = useCool();
	const ui = useUi();
	const history = ref([]);//搜索历史
	const readMore = ref()
	const searchValue = ref("") //搜索的数据
	onPullDownRefresh(async () => {
	});
	function clearHistory() {
		ui.showConfirm({
			title: "提示",
			message: "确定要清除搜索记录吗?",
			showCancelButton: true,
			confirmButtonText: "确定",
			callback(action) {
				if (action == "confirm") {
					storage.remove("search-history");
					history.value = [];
				} else {
				}
			}
		});

	}
	function uvParseTap(item:any) {
		console.log(item)
		audioManagerObj.musicValue = item.detail.node.children[0].text
		playMusic()
	}
	function toInfo(item : { id : string; }) {
		router.push("/pages/index/recipeInfo?id=" + item.id);
	}
	function onSearch(keyWord = "") {
		if (keyWord) {
			history.value = Array.from(new Set([...history.value, keyWord])).filter(Boolean);
			storage.set("search-history", history.value);
			searchValue.value=keyWord
			refresh({ keyWord })
		}
	}

	function refresh(params ?: any) {
		// 获取值
		const { data, next } = onRefresh(params);

		// 绑定对应的服务
		next(service.broadcast.recipe.page(data).then((res:any) => {
			res.list.forEach((item:any) => {
				if(item.numeral){
					let numeral = item.numeral.split(",")
					numeral.sort((a:any, b:any) => b.length - a.length)
					numeral.forEach(item1=> {
						const regex = new RegExp(item1, 'g');
						if(item.description){
							item.description = item.description.replace(regex, `<a class="highlight" href="#">$&</a>`);
						}
					})
				}
				const regex = new RegExp(searchValue.value, 'gi');
				if(item.description){
					item.description =formatRichText(item.description.replace(regex, `<span class="search-highlight" href="#">$&</span>`)) 
				}
				
			})
			searchValue.value = ""
			return res
		}));
	}
	defineExpose({
		refresh
	});
	onShow(() => {
		history.value = storage.get("search-history") || [];

	});
</script>
<style lang="scss">
	.highlight {
		text-decoration: underline;
		color:#6b69f8 !important;
	}
	.highlight:active{
		color:$cl-color-imagePlayer-primary !important;
	}
	.search-highlight{
		font-weight:700;
		color:$cl-color-imagePlayer-primary
	}
</style>
<style lang="scss" scoped>
	.search-bar{
		padding:20rpx 0;
		background:#fff
	}
	.result-order {
		padding: -10rpx 20rpx 0rpx 20rpx;
	}

	.group {}

	.list {
		padding: 20rpx 0rpx;

		.groupName {
			margin-bottom: 10rpx;
			// color: $cl-color-imagePlayer-primary;
			font-size: $cl-font-size-lg;
			font-weight: 700;
		}

		.groupDescription {
			color: $cl-color-subtitle;
			font-size: $cl-font-size-base;
		}

	}

	.history-list {
		font-size: $cl-font-size-base;
		color: $cl-color-subtitle;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		padding: 4rpx 20rpx;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 20rpx;
	}

	.page-goods-search {
		.order {
			.label {
				font-size: 28rpx;
			}
		}

		.lastest {
			padding: 30rpx 20rpx 30rpx 20rpx;

			.values {
				margin-top: 30rpx;

				// cl-tag {
				// 	margin: 0;
				// }

				// ::v-deep .cl-tag {
				// 	background-color: #f7f7f7;
				// 	color: #444;
				// 	margin: 0 10rpx 20rpx 10rpx;
				// 	padding: 0 30rpx;
				// }
			}

			.clearHistory {
				color: $cl-color-paragraph;
				font-size: $cl-font-size-sm;
			}
		}

		.recommend {
			padding: 30rpx;

			.values {
				.block {
					display: flex;
					align-items: center;
					height: 80rpx;
					margin-bottom: 20rpx;

					.index {
						display: inline-block;
						height: 10rpx;
						width: 10rpx;
						border-radius: 10rpx;
						background-color: $cl-color-primary;
						margin-right: 16rpx;
						margin-left: 10rpx;
					}

					.label {
						font-size: 26rpx;
						color: #666;
						position: relative;
						border-radius: 6rpx;
						padding: 0 4rpx;
					}

					&:active {
						.label {
							background-color: #eee;
						}
					}
				}
			}
		}
	}
</style>